<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <style>
        .el-dialog__body{
            /*height: 30vh;*/
            height: 100%;
            overflow: auto;
        }
        .tree_class{
            height: 970px;
            /*border-right: 1.5px solid #57a3f3;*/
        }
        @media (max-width: 1366px) {
            #userManage .table-wrap {
                height: 500px !important;;
                overflow: auto;
            }
            .tree_class{
                height: 6860px;
                /*border-right: 1px solid #57a3f3;*/
            }
        }
    </style>
</head>
<body>
<div id="userManage" class="center_div" style="display:none;">

    <div style="float:left;width:19%;background: white;position: absolute;" class="tree_class">
        <div style="height: 90%;overflow:auto;margin-top: 2%">
            <el-tree check-strictly
                     :load="loadChildren"
                     highlight-current
                     lazy
                     node-key="id"
                     :props="defaultProps"
                     :filter-node-method="filterNode"
                     ref="tree"
                     @node-click="loadDataaa">
                <span class="custom-tree-node" style="font-size: 14px" slot-scope="{ node, data }">
                    <span v-if="data.type===0"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                    <span v-if="data.type===1"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                </span>
            </el-tree>
        </div>
    </div>
    <div style="float:right;width: 80%">
        <div class="searchForm" style="margin-top: 1%;margin-left: 1%">
            <template >
                用户名：
                <el-input v-model="userName" size="mini" style="width: 10%"></el-input>
                登陆账号：
                <el-input v-model="userNumber" size="mini" style="width: 10%"></el-input>
                分机号码：
                <el-input v-model="extNumber" size="mini" style="width: 10%"></el-input>
                所属集团:
                <el-select v-model="fleetName" :placeholder="'请选择'" size="mini" filterable clearable >
                    <el-option :value="fleetName" style="height: auto">
                        <el-tree
                                :load="loadChildren"
                                highlight-current
                                lazy
                                node-key="id"
                                :props="defaultProps"
                                :filter-node-method="filterNode"
                                ref="tree"
                                @node-click="loadData">
                        <span class="custom-tree-node" style="font-size: 14px" slot-scope="{ node, data }">
                            <span v-if="data.type===0"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                            <span v-if="data.type===1"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                        </span>
                        </el-tree>
                    </el-option>
                </el-select>
            </template>
            <el-button type="primary"  size="mini" @click="query(1)">查询</el-button>
            <el-button type="primary"  size="mini" @click="add">添加</el-button>
        </div>
        <div class="table-wrap" style="width: 98%;margin-left: 1%">
            <el-table
                    :data="tableData"
                    style="width:100%;text-align: center;border-left:1px solid #EBEBEB"
                    header-cell-style="font-size:15px;text-align:center;color:#515A6E;padding:10px 0px 10px 0px !important;background:#F5F5F6;border:1px solid #EBEBEB;border-left:none"
                    cell-style="font-size:13px;text-align:center;color:#606266;padding:5px 0px 5px 0px !important;border:1px solid #EBEBEB;border-top:none;border-left:none">
                <el-table-column v-for="title in tableTitle" :prop="title.prop" :label="title.label">
                </el-table-column>
                <template v-if="buttons && buttons.length!==0">
                    <el-table-column
                            class="align-rightExt"
                            width="230px"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button v-for="button in buttons"
                                       @click="operate(scope.row,button.href)" :type="button.type" class="el-button el-button--text el-button--medium">{{button.label}}
                            </el-button>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <el-pagination
                    layout="prev, pager, next"
                    @current-change="changePageNum"
                    :current-page="pageNum"
                    :total="total">
            </el-pagination>
        </div>
    </div>
    <div>
        <el-dialog :title="title" :visible.sync="showBox" width="30%" append-to-body>
            <el-form ref="form" :model="form" label-width="80px" size="mini">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="登陆编号">
                            <el-input v-model="form.userId" :required="showAdd==true?false:true" :disabled="showAdd==true?false:true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户名">
                            <el-input v-model="form.userName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="IP分机号码">
                        <el-select v-model="form.extNumber" placeholder="请选择">
                            <el-option
                                    v-for="item in extNumberOptions"
                                    :key="item.Sipnumber"
                                    :label="item.Sipnumber"
                                    :value="item.Sipnumber">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="集团名称">
                            <el-select v-model="form.fleetName" :placeholder="'请选择'" filterable>
                                <el-option :value="form.fleetName" style="height: auto">
                                    <el-tree
                                            :load="loadChildren"
                                            highlight-current
                                            lazy
                                            node-key="id"
                                            :props="defaultProps"
                                            :filter-node-method="filterNode"
                                            ref="tree"
                                            @node-click="loadDataa">
                                        <span class="custom-tree-node" style="font-size: 14px" slot-scope="{ node, data }">
                                            <span v-if="data.type===0"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                                            <span v-if="data.type===1"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                                        </span>
                                    </el-tree>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属角色名称">
                            <el-select v-model="form.roleName" placeholder="请选择" multiple>
                                <el-option
                                        v-for="item in roleNameOptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="左话机分机号">
                            <el-input v-model="form.leftExt" type="number" :min="0" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="右话机分机号">
                            <el-input v-model="form.rightExt" type="number" :min="0" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item>
                        <el-button type="primary" @click="addUser" v-show="showAdd">添加</el-button>
                        <el-button type="primary" @click="updateUser" v-show="!showAdd">修改</el-button>
                        <el-button type="primary" @click="closeBox">取消</el-button>
                    </el-form-item>
                </el-row>

            </el-form>
        </el-dialog>
    </div>
    <div>
        <el-dialog :title="title" :visible.sync="showEPBox" width="30%" append-to-body>
            <el-form ref="form" :model="form" label-width="80px" size="mini">
                <el-row>
                    <el-form-item label="登陆编号">
                        <el-input v-model="form.userId" :disabled="true" style="width: 50%"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="新密码">
                        <el-input v-model="form.password" type="password" show-password style="width: 50%"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="重复新密码">
                        <el-input v-model="form.newPassword" type="password" show-password style="width: 50%"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item>
                        <el-button type="primary" @click="updatePassword">修改</el-button>
                        <el-button type="primary" @click="closeBox">取消</el-button>
                    </el-form-item>
                </el-row>

            </el-form>
        </el-dialog>
    </div>
</div>
</body>
<script>
    VueComponent.createUserManage=function () {
        if(window.userManageVue){
            window.userManageVue.refreshNodeBy();
            return;
        }
        window.userManageVue = new Vue({
            el: "#userManage",
            data: {
                defaultProps: {
                    label: 'name',
                    isLeaf:'isLeaf'
                },
                userName:'',
                userNumber:'',
                extNumber:'',
                fleetName:'',
                searchData:{},
                tableTitle: [
                    {label: '调度员名称', prop: 'NAME'},
                    {label: '调度员号码', prop: 'ID'},
                    {label: '分机号码', prop: 'EXTNUMBER'},
                    {label: '创建时间', prop: 'CREATEDATETIME'},
                    {label: '所属集团', prop: 'fleetName'}
                ],
                tableData: [],
                total: 0,
                pageNum: 1,
                pageSize: 10,
                buttons: [{label: "编辑", href: "update"},{label: "删除", href: "delete"},{label: "修改密码", href: "password"}],
                showBox:false,
                showEPBox:false,
                showAdd:true,
                title:'',
                form: {
                    userId:'',
                    user_id:'',
                    userName:'',
                    fleetId:'',
                    fleetName: '',
                    extNumber:'',
                    roleName:[],
                    password:'',
                    newPassword:'',
                    leftExt:'',
                    rightExt:'',
                },
                extNumberOptions:[],
                roleNameOptions:[],
                checkGroup:'true',checkFleet:'true',checkMonitor:'true'
            },
            mounted: function () {
                this.query();
                this.getExtNumber();
                this.getRoleName();
            },
            methods: {
                loadDataaa:function (node) {
                    var data = {
                        fleetId:node.id,
                        pageNum:1,
                        pageSize:this.pageSize
                    };
                    this.searchData.fleetName=node.name;
                    this.searchData.fleetId=node.id;
                    axios.post('/scs/userManage/getFleetUser', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                for(var i=0;i<data.obj.list.length;i++){
                                    data.obj.list[i].CREATEDATETIME=timeFormat(data.obj.list[i].CREATEDATETIME);
                                }
                                if (res.data.success) {
                                    this.tableData=data.obj.list;
                                    this.total = data.obj.total;
                                } else {
                                    this.$message('');
                                }
                            } else {
                                this.$message('');
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                refreshNodeBy:function(){
                    var node = this.$refs.tree.getNode(window.fleetId);
                    node.loaded = false;
                    node.expand();
                },
                loadChildren: function (node, resolve) {
                    var that =this;
                    if(node.data){
                        that.getChild(node.data.id , node.data.type ,resolve);
                    }else{
                        setTimeout(function(){ that.getChild( window.fleetId , 0 ,resolve);}, 0);
                    }
                },
                getChild: function (id, type,resolve) {
                    var jsonData={
                        parentId:id,
                        type:type
                    };
                    axios.post('/scs/fleetManage/getFleet',jsonData)
                        .then(function (res) {
                            res = res.data;
                            if(res.success){
                                var childNodes = [];
                                if (res.obj) {
                                    childNodes = res.obj;
                                }
                                resolve(childNodes);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                filterNode:function(value, data) {
                    if (!value)
                        return true;
                    else
                        return data.name.indexOf(value) !== -1;
                },
                loadData:function (node) {
                    this.fleetName=node.name;
                    this.searchData.fleetName=node.name;
                    this.searchData.fleetId=node.id;
                },
                loadDataa:function (node) {
                    this.form.fleetName=node.name;
                    this.form.fleetId=node.id;
                },
                query: function (pageNum) {
                    if(pageNum){
                        this.pageNum=pageNum
                    }
                    var data = {
                        fleetId:this.searchData.fleetId||window.fleetId,
                        userName:this.userName||'',
                        userNumber:this.userNumber||'',
                        extNumber:this.extNumber||'',
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    };
                    axios.post('/scs/userManage/getFleetUser', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                for(var i=0;i<data.obj.list.length;i++){
                                    data.obj.list[i].CREATEDATETIME=timeFormat(data.obj.list[i].CREATEDATETIME);
                                }
                                if (res.data.success) {
                                    this.tableData=data.obj.list;
                                    this.total = data.obj.total;
                                } else {
                                    this.$message('');
                                }
                            } else {
                                this.$message('');
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                getExtNumber:function () {
                    axios.post('/scs/userManage/getExtNumber', {})
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.extNumberOptions=data.obj.list;
                                } else {
                                    this.$message(res.msg);
                                }
                            } else {
                                this.$message(res.msg);
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                getRoleName:function () {
                    axios.post('/scs/userManage/getRoleName', {fleetId:window.fleetId})
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.roleNameOptions=data.obj.list;
                                } else {
                                    this.$message(res.msg);
                                }
                            } else {
                                this.$message(res.msg);
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                formClear:function () {
                    this.form.userId='';
                    this.form.user_id='';
                    this.form.userName='';
                    this.form.fleetId='';
                    this.form.fleetName='';
                    this.form.extNumber='';
                    this.form.roleName=[];
                    this.form.leftExt='';
                    this.form.rightExt='';
                },
                add:function () {
                    var that=this;
                    that.formClear();
                    that.getExtNumber();
                    that.getRoleName();
                    that.showBox = true;
                    that.showAdd=true;
                    that.title = "添加用户";
                },
                addUser:function(){
                    var that = this;
                    var data = {
                        userId:that.form.userId,
                        userName:that.form.userName,
                        fleetId:that.form.fleetId,
                        extNumber:that.form.extNumber,
                        roleName:that.form.roleName,
                        leftExt:that.form.leftExt,
                        rightExt:that.form.rightExt
                    };
                    data.managePriv=7;
                    if(that.form.userId==='' || that.form.userName===''){
                        that.$message('用户名或密码不能为空');
                        return
                    }
                    if(that.form.fleetId===''){
                        that.$message('归属集团不能为空');
                        return
                    }
                    if(that.form.roleName===[]){
                        that.$message('所属角色不能为空');
                        return
                    }
                    axios.post('/scs/userManage/addUser',data)
                        .then(function (res) {
                            var res = res.data;
                            if(res.success){
                                that.closeBox();
                                that.$message('添加成功');
                                that.query(that.pageNum);
                            }else{
                                that.$message(res.msg);
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
                updateUser:function () {
                    var that = this;
                    var data = {
                        userId:that.form.userId,
                        user_id:that.form.user_id,
                        userName:that.form.userName,
                        fleetId:that.form.fleetId,
                        extNumber:that.form.extNumber,
                        roleName:that.form.roleName,
                        leftExt:that.form.leftExt,
                        rightExt:that.form.rightExt
                    };
                    data.managePriv=7;
                    if(that.form.userId==='' || that.form.userName===''){
                        that.$message('用户名或密码不能为空');
                        return
                    }
                    if(that.form.fleetId===''){
                        that.$message('归属集团不能为空');
                        return
                    }
                    if(that.form.roleName===[]){
                        that.$message('所属角色不能为空');
                        return
                    }
                    axios.post('/scs/userManage/updateUser',data)
                        .then(function (res) {
                            var res = res.data;
                            if(res.success){
                                that.closeBox();
                                that.$message('编辑成功');
                                that.query(that.pageNum);
                            }else{
                                that.$message(res.msg);
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
                updatePassword:function () {
                    var that = this;
                    if(that.form.password != that.form.newPassword){
                        that.$message('密码不一致');
                        return
                    }
                    var data = {
                        userId:that.form.userId,
                        password:Md5_Encrpt(that.form.password)
                    };
                    axios.post('/scs/userManage/updatePassword',data)
                        .then(function (res) {
                            var res = res.data;
                            if(res.success){
                                that.closeBox();
                                that.$message('编辑成功');
                                that.query(that.pageNum);
                            }else{
                                this.$message(res.msg);
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
                closeBox:function () {
                    this.formClear();
                    this.showBox=false;
                    this.showEPBox=false;
                },
                operate:function (row,href) {
                    var that=this;
                    that.formClear();
                    if(href.indexOf('update') !== -1){
                        that.getExtNumber();
                        that.getRoleName();
                        that.showBox = true;
                        that.showAdd=false;
                        that.title = "编辑用户";
                        that.form.userId=row.ID;
                        that.form.user_id=row.user_id;
                        that.form.userName=row.NAME;
                        that.form.fleetId=row.FLEET_ID;
                        that.form.fleetName=row.fleetName;
                        that.form.extNumber=row.EXTNUMBER;
                        var roleName=[];
                        roleName=row.roleName.split(',');
                        for(var i=0;i<roleName.length;i++){
                            that.form.roleName.push(parseInt(roleName[i]));
                        }
                        that.form.leftExt=row.leftExt;
                        that.form.rightExt=row.rightExt;
                    }else if(href.indexOf('password') !== -1){
                        that.showEPBox = true;
                        that.title = "编辑用户密码";
                        that.form.userId=row.ID;
                    }else if(href.indexOf('manage')!==-1){

                    }else{
                        this.$confirm('是否确定删除', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                        axios.post('/scs/userManage/deleteUser',{userId:row.ID,user_id:row.user_id,extNumber:row.EXTNUMBER})
                            .then(function (res) {
                                var res = res.data;
                                if(res.success){
                                    that.$message('删除成功');
                                    that.query(1);
                                }
                            })
                            .catch(function (err) {
                                console.log(err);
                            });});
                    }
                },
                changePageNum: function (val) {
                    this.pageNum = val;
                    this.query();
                },
            }
        });
    }
</script>
</html>
